<template>
  <div class="content">
    <div class="logo">
      <img src="../../assets/img/logo.png" class="logo"/>
    </div>
    <div class="form">
      <div class="content">
        <div class="form-reg">
          <div class="one">
            <!--<h3 @click="changeLoginType" v-bind:class="{ active: isActive }">密码登录</h3>-->
            <h3 v-bind:class="{ active: isActive }">密码登录</h3>
          </div>
          <div class="two">
            <!--<h3 @click="changeLoginType" v-bind:class="{ active: !isActive }">验证码登录</h3>-->
          </div>
          <div class="passwod" v-show="pShow">
            <div class="reg">
              <input v-model="mobile" type="text" class="input phone" placeholder="请输入手机号码">
              <input v-model="password" type="password" class="input" placeholder="请输入密码">
            </div>
            <div class="three">
              <router-link to="forgetpasswod1" class="a3">忘记密码呢？</router-link>
              <router-link to="registered" class="a2">立即注册</router-link>
            </div>
          </div>
          <!--<div class="yzm" v-show="show">-->
          <!--<input name="" type="text" class="input phone" placeholder=" 请输入手机号码">-->
          <!--<div class="verify">-->
          <!--<input name="" type="text" class="input possword" placeholder=" 短信验证码">-->
          <!--<a href="#">获取验证码</a>-->
          <!--</div>-->
          <!--<div class="three">-->
          <!--<router-link to="registered" class="a3">立即注册</router-link>-->
          <!--</div>-->
          <!--</div>-->
          <button v-on:click="login">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'indes',
    data () {
      return {
        isActive: true,
        show: false,
        pShow: true,
        mobile: '',
        password: '',
        usId:''
      }
    },
    methods: {
      changeLoginType () {
        this.show = !this.show
        this.pShow = !this.pShow
        this.isActive = !this.isActive
      },
      login () {
        let params = {
          'mobile': this.mobile,
          'password': this.password
        }
        this.$post('/user/login', params).then(response => {
          let r = response.data
           this.usId = r.data.userId
           console.log(this.usId)
          if (r.code == 0) {
            let user = {
              'token': r.data.token
            }
            this.$store.dispatch('login', user)
            window.location.href = '/#/'
          } else {
            alert(r.msg)
          }
        })
      }
    }
  }
</script>

<style>
  .form {
    width: 60%;
    margin: 0 auto;
  }

  .logo {
    width: 78px;
    height: 42px;
    /*float: bottom;*/
    margin-top: -42px;
    margin-left: 10px;
  }

  .content {
    width: 60%;
    height: 400px;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: absolute;
    min-width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .form .gologin {
    margin: 18px 60px 0 30px;
  }

  .gologin a {

    font-size: 14px;
    color: #007FE0;
  }

  .active {
    border-bottom: 3px solid #42ADFF;
  }

  .form .form-reg {
    width: 60%;
    height: 400px;
    margin: 42px auto 60px auto;
  }

  .form-reg .one {
    width: 100%;
    display: inline-block;

  }

  .form-reg .three {
    margin-top: 14px;
  }

  .three a {

    font-size: 14px;
    color: #007FE0;
  }

  .a2 {
    float: right;
  }

  .a3 {
    margin-left: 10px;
  }

  .form-reg h3 {
    text-align: center;
    padding-bottom: 20px;


    font-size: 14px;
    color: #000000;
  }

  .form-reg button {
    display: block;
    width: 80%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    background-color: #42ADFF;
    border: 0 solid #979797;
    border-radius: 4px;
    margin: 42px auto 0 auto;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #FFFFFF;
  }

  .input {
    display: block;
    margin: 0 auto;
    height: 60px;
    width: 100%;
    border: 0px;
    outline: none;
    border-bottom: 1px solid #DADADA;

    font-size: 16px;
    color: #9B9B9B;
    padding-left: 10px;
  }

  .verify {
    border-bottom: 1px solid #DADADA;
  }

  .verify input {
    height: 60px;
    width: 80%;
    border: 0px;
    outline: none;
  }

  .imgcode {
    width: 20%;
  }

  .yzm .possword {
    height: 60px;
    width: 80%;
    border: 0px;
    outline: none;
    margin: 0;
    display: inline-block;
  }

  .yzm a {

    font-size: 12px;
    color: #007FE0;
  }

</style>
